<template>
  <div class="rightMain" v-if="flag">
    <div class="title">{{ title }}</div>
    <div class="mains">

      <div class="ss2">
        <div class="ss9">
          <!--          <img class="ss3" src="../../assets/images/house.png">-->
          <CommonImage class="ss3" :src="companyLogo.optionValue"/>
          <!--          <div class="ss4">编辑</div>-->
          <div class="ss4">
            <!--            <el-upload :multiple="false" accept="image/*"  :on-change="uploadFile" >-->
            <el-upload :multiple="false" accept="image/*" :on-progress="uploadFile">
              {{ $t('text.System.l24') }}
            </el-upload>
          </div>
        </div>
        <div class="ss5">{{ companyName }}
        </div>
      </div>
      <div class="ss6">
        <div class="ss7" v-for="(item,index) in companyConfig" :key="index">
          <div class="ss8" v-if="item.elementType===0">{{ item.name }}</div>
          <div class="ss10" v-if="item.elementType===0">
            <input @blur="changeInput(item.optionCode,item.optionValue)" style="width: 500px"
                   v-model="item.optionValue">
          </div>
          <textarea v-if="item.elementType===1" v-model="item.optionValue"
                    @blur="changeInput(item.optionCode,item.optionValue)"></textarea>
        </div>
      </div>

    </div>
  </div>
</template>

<script>


import {companyConfig} from "@/views/systemSetting/data/CompanyConfiguration";
import {findAllOptions, updateOptions} from "@/http/api";
import {ElMessage} from "element-plus"
import axios from "axios";
import {translate as $t} from "@/language";
let config = require('../../config.js')
export default {
  name: "CompanyConfiguration",
  components: {},
  props: {
    title: String
  },
  data() {
    return {
      companyName: '',
      flag: false,
      companyLogo: {
        optionCode: 'companyLogo',
        optionValue: ''
      },
      companyConfig
    }
  },
  created() {
    this.findAllOptions();
  },
  mounted() {
  },
  methods: {
    $t,
    findAllOptions() {
      findAllOptions().then(res => {
        // console.log('res', res)

        for (let item in res) {
          //logo

          if (this.companyLogo.optionCode === item) {
            this.companyLogo.optionValue = res[item].optionValue
          }
          //公司配置
          for (let one of this.companyConfig) {
            // console.log('one: ', one)
            if (one.optionCode === item) {
              one.optionValue = res[item].optionValue
            }
          }

          if (item === 'companyName') {
            this.companyName = res[item].optionValue
          }

          this.flag = true
        }

        // console.log('this.companyLogo', this.companyLogo)
        // console.log('this.companyConfig', this.companyConfig)
      })
    },
    changeInput(optionCode, optionValue) {
      this.updateOptions(optionCode, optionValue)
    },
    updateOptions(optionCode, optionValue) {
      console.log('optionCode', optionCode)
      console.log('optionValue', optionValue)

      let data = `{"${optionCode}":"${optionValue}"}`
      // console.log('data: ',JSON.parse(data))
      updateOptions(JSON.parse(data)).then(res => {
        console.log('res', res)
        ElMessage.success('操作成功')
        if (optionCode === 'companyName') {
          this.companyName = optionValue
        }
      })
    },
    setImageValue(imgUrl) {
      this.companyLogo.optionValue = imgUrl
      // console.log('this.companyLogo', this.companyLogo)
      this.updateOptions(this.companyLogo.optionCode, this.companyLogo.optionValue)
    },
    uploadFile(event, e) {
      const file = e.raw; // <- 这里是直接上传的
      //大小
      const size = file.size / 1024 / 1024 / 2;
      if (
          !(
              file.type === "image/png" ||
              file.type === "image/gif" ||
              file.type === "image/jpg" ||
              file.type === "image/jpeg"
          )
      ) {
        ElMessage.error({
          showClose: true,
          message: "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
          type: 'error',
        })
      } else if (size > 20) {
        ElMessage.error({
          showClose: true,
          message: "图片大小必须小于20M",
          type: 'error',
        })
      } else {
        // if (this.limit == 1) this.imgUrl = []; //此处判断为一张的时候需要清空数组
        const params = new FormData();
        params.append("file", file);
        axios({
          url: config.api[0].apiUrl+"/opsli-boot/api/v1/house/file/upload",
          method: 'post',
          data: params,
          headers: {'T-Authorization': localStorage.getItem('token')},
          processData: false,
          contentType: false,
        }).then((response) => {
          if (response.data.code === 0) {
            // this.$emit("returnData", response.data.data.fileUrls);
            // console.log('response.data.',response.data)
            // console.log('response.data.',response.data.data.fileUrls[0])
            let imgUrl = response.data.data.fileUrls[0]
            this.setImageValue(imgUrl)
            // console.log('imgUrl',this.imgUrl)
          } else {
            ElMessage.error({
              showClose: true,
              message: response.data.msg,
              type: 'error',
            })
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    }
  },
  watch: {},
  computed: {}

}
</script>
<style scoped>
input {
  border: none;
  outline: none;
  text-align: end;
}

textarea {
  width: 100%;
  border: none;
  outline: none;
}

.mains {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
}

.title {
  background: #f2f2f2;
  color: gray;
  height: 40px;
  line-height: 40px;
}

.rightMain {
  width: 100%;
  margin: 10px 15px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.mains {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
}

.ss9 {
  border-radius: 100%;
  height: 80px;
  width: 80px;
  overflow: hidden;
}

.ss8{
  white-space: nowrap;
}

.ss7 {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss6 {
  display: flex;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  flex-direction: column;
  min-width: 300px;
  padding: 30px 100px;
  height: 100%;
}

.ss5 {
  font-size: 15px;
  font-weight: 600;
  color: #6698ff;
  padding: 5px 0;
}

.ss4 {
  position: sticky;
  background: #626262;
  width: 80px;
  margin-top: -30px;
  font-size: 12px;
  height: 35px;
  color: white;
  line-height: 25px;
  border-radius: 0 0 100% 100%;
  opacity: 0.7;
}

.ss3 {
  width: 80px;
  height: 80px;
  border-radius: 100%;
}

.ss2 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
}
</style>
  